<template>
  <view class="content-card">
    <view class="content-header">
      <view>
        <text class="title">{{ content.title }}</text>
        <view class="tags-wrapper">
          <text class="category-tag">{{ content.category }}</text>
          <text v-for="tag in content.tags" :key="tag" class="tag">
            {{ tag }}
          </text>
        </view>
      </view>
      <text class="date">{{ formatDate(content.createTime) }}</text>
    </view>

    <view v-if="content.type === 'text'" class="text-content">
      <text>{{ content.content }}</text>
    </view>

    <view v-if="content.type === 'image'" class="image-content">
      <scroll-view scroll-x>
        <image 
          v-for="(img, index) in content.images" 
          :key="index"
          :src="img"
          class="preview-image"
          @click="previewImage(index)"
        />
      </scroll-view>
    </view>

    <view v-if="content.type === 'link'" class="link-content">
      <view 
        v-for="(link, index) in content.links" 
        :key="index"
        class="link-item"
        @click="openLink(link)"
      >
        <text>{{ link }}</text>
      </view>
    </view>

    <view class="actions">
      <CustomButton 
        text="编辑" 
        @click="handleEdit"
        backgroundColor="#67c23a"
      />
      <CustomButton 
        text="删除" 
        @click="handleDelete"
        backgroundColor="#f56c6c"
      />
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import CustomButton from '@/components/CustomButton.vue'

const props = defineProps({
  content: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['edit', 'delete'])

const formatDate = (timestamp) => {
  if (!timestamp) return ''
  const date = new Date(timestamp)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

const previewImage = (index) => {
  uni.previewImage({
    urls: props.content.images,
    current: index
  })
}

const openLink = (link) => {
  // #ifdef H5
  window.open(link, '_blank')
  // #endif
  
  // #ifdef MP
  uni.setClipboardData({
    data: link,
    success: () => {
      uni.showToast({
        title: '链接已复制',
        icon: 'none'
      })
    }
  })
  // #endif
}

const handleEdit = () => {
  emit('edit', props.content)
}

const handleDelete = () => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这条内容吗？',
    success: (res) => {
      if (res.confirm) {
        emit('delete', props.content)
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.content-card {
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  padding: 32rpx;
  margin-bottom: 32rpx;

  .content-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24rpx;

    .title {
      font-size: 32rpx;
      font-weight: bold;
    }

    .tags-wrapper {
      display: flex;
      gap: 16rpx;
      margin-top: 16rpx;
    }

    .category-tag {
      padding: 8rpx 16rpx;
      background-color: #e6f1fc;
      color: #409eff;
      font-size: 24rpx;
      border-radius: 8rpx;
    }

    .tag {
      padding: 8rpx 16rpx;
      background-color: #f5f7fa;
      color: #606266;
      font-size: 24rpx;
      border-radius: 8rpx;
    }

    .date {
      font-size: 24rpx;
      color: #909399;
    }
  }

  .text-content {
    margin-bottom: 24rpx;
    color: #606266;
    line-height: 1.5;
  }

  .image-content {
    margin-bottom: 24rpx;
    
    scroll-view {
      white-space: nowrap;
    }

    .preview-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
      margin-right: 16rpx;
      display: inline-block;
      object-fit: cover;
    }
  }

  .link-content {
    margin-bottom: 24rpx;

    .link-item {
      color: #409eff;
      text-decoration: underline;
      margin-bottom: 8rpx;
      
      text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .actions {
    display: flex;
    justify-content: flex-end;
    gap: 16rpx;
  }
}
</style>